<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>05Vue中的MVVM</title>
        <script type="text/javascript" src="../js/vue.js"></script>
        <!-- shortcut icon”这样做的结果是所有浏览器都可以理解此代码。只有当希望为新浏览器提供另一种备用图像,才有必要添加第二行使用icon -->
        <link rel ="shortcut icon" type="image/x-icon" href="../static/vue.jpg">
    </head>

    <!--
        1.data中所有的属性，最后都出现了vm身上
        2.vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用
    -->

    <body>
        <div id="root"><!-- 准备好一个容器root -->
            <h1>学校名称：{{name}}</h1>
            <h1>学校地址：{{address}}</h1>
            <h1>vm：{{_c}}</h1> <!-- _c是Vue原型上的属性，可以直接使用 -->
        </div>
    </body>

    <script type="text/javascript">
        Vue.config.productionTip = false //阻止Vue在启动时生成生产提示
    
        const vm = new Vue({ //这个vm标识的就是MVVM
            el:'#root',
            data:{
                name:'深圳中学',
                address:'深圳市罗湖区泥岗西路1068号',
            }
        })
    </script>
</html>